import React, { useState, useEffect, } from 'react'
import '../rem'
import './Sou.css'
import { useNavigate } from 'react-router-dom'
import { Add, Dongdong, UserAdd, Del, Microphone } from '@nutui/icons-react'
export default function SouSuo() {
    const [title, setTitle] = useState('')
    const [recognition, setRecognition] = useState(null);
  
    const startListening = () => {
        recognition.start(); // 开始识别语音
        console.log('开始录音');
      };
    
      const stopListening = () => {
        recognition.stop();
        console.log('停止录音');
      };
    const [history, setHistory] = useState(JSON.parse(localStorage.getItem('history')) || [])
    const navigate = useNavigate()
    useEffect(() => {
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; // 兼容不同浏览器
        const recognition = new SpeechRecognition();
        console.log(recognition);
        setRecognition(recognition);
        recognition.lang = 'zh-CN'; // 设置语言为中文（中国大陆）
        recognition.interimResults = false; // 不获取中间结果
        // 设置识别结果回调函数
        recognition.addEventListener('result', (e) => {
          console.log(e.results[0][0].transcript); // 提取识别后的文字
          setTitle(e.results[0][0].transcript);
        });
        return () => {
          recognition.stop(); // 停止语音识别，防止内存泄露或不必要的资源消耗
        };
      }, []);
    return (
        <div className='box1'>
            <input type="text" value={title} onChange={(e) => {
                setTitle(e.target.value)
            }} className='searchOne'
                onKeyDown={(e) => {
                    if (e.keyCode === 13) {
                        let newlist = [...history]
                        if (newlist.length < 5) {
                            newlist.unshift({ id: newlist.length + 1, title: title })
                            localStorage.setItem('history', JSON.stringify(newlist))
                            setHistory(newlist)
                            navigate(`/search`, { state: { title: title } })
                        } else {
                            newlist.unshift({ id: newlist.length + 1, title: title })
                            newlist.pop()
                            localStorage.setItem('history', JSON.stringify(newlist))
                            setHistory(JSON.parse(localStorage.getItem('history')))
                            navigate(`/search`, { state: { title: title } })
                        }

                    }
                }}
            />
            <button className='quxiao' onClick={() => {
                navigate('/cate')
            }}>取消</button>
            <Microphone style={{ paddingTop: '10px', marginLeft: '10px' }} width={20} height={20} onClick={() => {
                startListening()
            }} />
            <p className='d1'>历史搜索 <span className='del'><Del width={20} height={20} onClick={() => {
                localStorage.setItem('history', JSON.stringify([]))
                setHistory([])
            }} /></span></p>
            <div className='box3'>
                {history.map(item => {
                    return <button className='d2' onClick={() => {
                        setTitle(item.title)
                        navigate(`/search`, { state: { title: item.title } })
                    }}>{item.title}</button>
                })}
            </div>
            <div>
                <p className='d1'>热门搜索</p>
                <div onClick={() => {
                    let newlist = [...history]
                    if (newlist.length < 6) {
                        newlist.unshift({ id: newlist.length + 1, title: '夏日美照' })
                        localStorage.setItem('history', JSON.stringify(newlist))
                        setHistory(newlist)
                        navigate(`/search`, { state: { title: '夏日美照' } })
                    } else {
                        newlist.unshift({ id: newlist.length + 1, title: '夏日美照' })
                        newlist.pop()
                        localStorage.setItem('history', JSON.stringify(newlist))
                        setHistory(JSON.parse(localStorage.getItem('history')))
                        navigate(`/search`, { state: { title: '夏日美照' } })
                    }
                }}>
                    <span style={{ display: "inline-block", fontSize: "20px", margin: "15px", color: "red" }}>1</span>
                    <span style={{ display: "inline-block", fontSize: '18px', marginLeft: '30px' }}>#夏日美照</span>
                    <span style={{ display: "inline-block", fontSize: '16px', color: "gray", marginLeft: "2.5rem" }}>200W热度</span>
                </div>
                <div
                    onClick={() => {
                        let newlist = [...history]
                        if (newlist.length < 6) {
                            newlist.unshift({ id: newlist.length + 1, title: '我们放假咯' })
                            localStorage.setItem('history', JSON.stringify(newlist))
                            setHistory(newlist)
                            navigate(`/search`, { state: { title: '我们放假咯' } })
                        } else {
                            newlist.unshift({ id: newlist.length + 1, title: '我们放假咯' })
                            newlist.pop()
                            localStorage.setItem('history', JSON.stringify(newlist))
                            setHistory(JSON.parse(localStorage.getItem('history')))
                            navigate(`/search`, { state: { title: '我们放假咯' } })
                        }
                    }}
                >
                    <span style={{ display: "inline-block", fontSize: "20px", margin: "15px", color: "red" }}>2</span>
                    <span style={{ display: "inline-block", fontSize: '18px', marginLeft: '30px' }}>#我们放假咯</span>
                    <span style={{ display: "inline-block", fontSize: '16px', color: "gray", marginLeft: "2.5rem" }}>120W热度</span>
                </div>
                <div
                    onClick={() => {
                        let newlist = [...history]
                        if (newlist.length < 6) {
                            newlist.unshift({ id: newlist.length + 1, title: '宇将军首秀' })
                            localStorage.setItem('history', JSON.stringify(newlist))
                            setHistory(newlist)
                            navigate(`/search`, { state: { title: '宇将军首秀' } })
                        } else {
                            newlist.unshift({ id: newlist.length + 1, title: '宇将军首秀' })
                            newlist.pop()
                            localStorage.setItem('history', JSON.stringify(newlist))
                            setHistory(JSON.parse(localStorage.getItem('history')))
                            navigate(`/search`, { state: { title: '宇将军首秀' } })
                        }
                    }}
                >
                    <span style={{ display: "inline-block", fontSize: "20px", margin: "15px", color: "red" }}>3</span>
                    <span style={{ display: "inline-block", fontSize: '18px', marginLeft: '30px' }}>#宇将军首秀</span>
                    <span style={{ display: "inline-block", fontSize: '16px', color: "gray", marginLeft: "2.5rem" }}>80W热度</span>
                </div>
                <div
                    onClick={() => {
                        let newlist = [...history]
                        if (newlist.length < 6) {
                            newlist.unshift({ id: newlist.length + 1, title: '我才是奶龙' })
                            localStorage.setItem('history', JSON.stringify(newlist))
                            setHistory(newlist)
                            navigate(`/search`, { state: { title: '我才是奶龙' } })
                        } else {
                            newlist.unshift({ id: newlist.length + 1, title: '我才是奶龙' })
                            newlist.pop()
                            localStorage.setItem('history', JSON.stringify(newlist))
                            setHistory(JSON.parse(localStorage.getItem('history')))
                            navigate(`/search`, { state: { title: '我才是奶龙' } })
                        }
                    }}
                >
                    <span style={{ display: "inline-block", fontSize: "20px", margin: "15px", color: "red" }}>4</span>
                    <span style={{ display: "inline-block", fontSize: '18px', marginLeft: '30px' }}>#我才是奶龙</span>
                    <span style={{ display: "inline-block", fontSize: '16px', color: "gray", marginLeft: "2.5rem" }}>20W热度</span>
                </div>
                <div

                    onClick={() => {
                        let newlist = [...history]
                        if (newlist.length < 5) {
                            newlist.unshift({ id: newlist.length + 1, title: '我是贝利亚' })
                            localStorage.setItem('history', JSON.stringify(newlist))
                            setHistory(newlist)
                            navigate(`/search`, { state: { title: '我是贝利亚' } })
                        } else {
                            newlist.unshift({ id: newlist.length + 1, title: '我是贝利亚' })
                            newlist.pop()
                            localStorage.setItem('history', JSON.stringify(newlist))
                            setHistory(JSON.parse(localStorage.getItem('history')))
                            navigate(`/search`, { state: { title: '我是贝利亚' } })
                        }
                    }}>
                    <span style={{ display: "inline-block", fontSize: "20px", margin: "15px", color: "red" }}>5</span>
                    <span style={{ display: "inline-block", fontSize: '18px', marginLeft: '30px' }}>#我是贝利亚</span>
                    <span style={{ display: "inline-block", fontSize: '16px', color: "gray", marginLeft: "2.5rem" }}>20W热度</span>
                </div>
            </div>

        </div>
    )
}
